import { debounce } from '../utils/tools'
const onDataChange = debounce((data: any, slot: any) => {
  let { templates } = data
  const ids: string[] = []
  for (let c = 1; c <= templates.length; c++) {
    ids.push(`${1}x${c}`)
  }
  data.prevSlots?.forEach?.((id: any) => {
    if (ids.includes(id)) return
    const slotId = `slot_${id}`
    if (slot.get(slotId)) slot.remove(slotId)
  })
  data.prevSlots = ids

  for (const id of ids) {
    const slotId = `slot_${id}`
    if (slot.get(slotId)) continue
    slot.add({
      id: slotId,
      title: id,
      type: 'scope',
      inputs: [
        {
          id: 'item',
          title: '当前项',
          schema: {
            type: 'any'
          }
        },
        {
          title: '当前索引',
          id: 'index',
          schema: {
            type: 'number'
          }
        }
      ]
    })
  }
}, 500)
export default {
  '@init'({ style }) {
    style.width = '100%'
    style.height = 'auto'
  },
  '@resize': {
    options: ['width', 'height']
  },
  ':root': {
    style: [
      {
        title: "网格间距",
        type: 'inputNumber',
        options: [
          { title: '左右', min: 0, width: 100 },
          { title: '上下', min: 0, width: 100 }
        ],
        value: {
          get({ data }: any) {
            return data.gap
          },
          set({ data }: any, value: number[]) {
           data.gap = value;
          }
        }
      },
      {
        title: '容器样式',
        catelog: '默认',
        options: ['border', 'padding', 'BoxShadow', { type: 'font', config: { disableTextAlign: true } }, 'background']
      }
    ],
    items: ({ data, slot, env, inputs, slots }: any, cate1, cate2) => {
      cate1.title = '常规'
      cate1.items = [
        {
          title: '方向',
          type: 'Select',
          value: {
            get({ data }: any) {
              return data.direction
            },
            set({ data }: any, value: any) {
              data.direction = value
            }
          },
          options: [
            { value: 'ver', label: '纵向' },
            { value: 'hor', label: '横向' }
          ]
        },
        {
          title: '模版列表',
          type: 'array',
          options: {
            getTitle: ({ unit, value }) => {
              return unit == 'auto' ? 'auto' : `${value}${unit}`
            },
            onAdd: () => {
              const defaultOption = {
                value: '1',
                unit: 'fr'
              }
              return defaultOption
            },
            items: [
              {
                title: '尺寸类型',
                type: 'select',
                value: 'unit',
                options: ['auto', 'fr', 'px', '%'].map((i) => ({ value: i, label: i }))
              },
              {
                title: '尺寸值',
                type: 'text',
                value: 'value'
              }
            ]
          },
          value: {
            get({ data }: any) {
              return data.templates
            },
            set({ data, focusArea, env }: any, options: any[]) {
              data.templates = options
              onDataChange(data, slot)
            }
          }
        }
      ]
    }
  }
}
